<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<script src="./js/chinadx.js"></script>
	<style>
	/* 清除浏览器样式 */
		ul,li,p,img,h1,div,a,h4{
			margin: 0;
			padding: 0;
			/* 去除li的点 */
			list-style: none;
			/* 去除a的下划线 */
			text-decoration: none;
		}
		.header_1,.footer_1,.main_1{
			width: 960px;
			margin: 0 auto;

		}
		.main_1 div,.header_zj div{
			border-radius: 15px;
		}
		body{
			background-color: rgb(235, 235, 235);
		}
	/* 头部 */
		.header_1{
			height: 440px;
			/* background-color: #afb; */
		}
		/* 头部-导航 */
		.header_dh{
			width: 100%;
			height: 45px;
			background-color: #fff;
			line-height: 45px;
		}
		/* a的文字颜色 */
		.header_dh a:hover{
			color:#fff;
			background-color: rgb(122, 122, 122);
		}
		/* a 标签（文字）间隔 */
			.header_dh li a{
				float: left;
				padding: 0 10px;
				color: #000;
			}
			/* 导航logo */
			.header_dh_logo img{
				height: 25px;
				float: left;
				margin: 10px 0 10px 10px;
			}
			/* 导航文字的UL */
			.header_dh_wz{
				line-height: 45px;
				/* 导航三块的间隔 */
				margin: 0 50px 0 30px;
				background-color: #fff;
				float: left;
			}
			/* 导航文字 左浮动 */
			.header_dh li{
				float: left;
			}
			/* 登录部分右浮动 */
			.header_dh_dl{
				float: right;
			}
		/* 头部-中间 */
		.header_zj{
			width: 100%;
			height: 330px;
			/* background-color: #fff; */
			margin: 10px 0;
		}
			/* 头部  - 中间 - 左、右面 */
			.header_zj_left,.header_zj_right{
				width: 220px;
				height: 100%;
				float: left;
				background-color: #fff;

			}
			/* 头部 - 中间- 左面 */
			.header_zj_left li{
				/* background-color: rgb(255, 209, 209); */
				float: left;
				height: 30px;
				line-height: 30px;
				margin: 0px 0;
				padding-top: 1px;
			}
			.header_zj_left a{
				/* 修剪文字溢出 */
				overflow: hidden;
				/* 强制文本不换行 */
				white-space: nowrap;
				float: left;
				font-size: 13px;
				color: rgb(105, 105, 105);
				padding: 1px 8px 0 9px;
			}
			.header_zj_left span{
				font-size: 15px;
				color: #000;
			}
			.header_zj_left a:hover{
				/* background-color: rgb(221, 221, 221); */
				color: #000;
				text-decoration:underline;
			}
			/* 头部 - 中间 -中间 */
			.header_zj_banner{
				width: 500px;
				height: 100%;
				float: left;
				background-color: #fff;
				margin: 0 10px;
				/* 裁剪超出父元素的部分 */
				overflow: hidden;
			}
			.header_zj_banner img{
				/* width: 100%; */
				height: 100%;
			}
		/* 头部 - 右面 */
			.div1,.div2,.div3,.div4{
				width: 80%;
				height: 50px;
				float: left;
				margin: 10px 20px;

			}
			.div2{
				background-color: #fba;

			}
			.div3{
				background-color: rgb(17, 109, 17);
			}
			.div3 p{
				color: #fff;
			}
			.div2{
				width: 100px;
				height: 100px;
				margin: 15px 60px 5px 60px;
				border-radius: 50%;
			}
			.header_zj .div2 p,.div3 p,.div4 p{
				/* padding: 0 auto ;
				background-color: #fff;
				float: left; */
				text-align: center;
				line-height: 50px;
			}
			.div1 p{
				text-align: center;
			}
			.header_zj .div4 p{
				font-size: 14px;
			}
			.header_zj_right_img{
				width: 100px;
				height: 100px;
				margin: 0 auto;
				border-radius: 100px;
				background-color: #fba;
				overflow: hidden;
			}

		/* 头部-下部 */
		.header_x{
			width: 100%;
			height: 45px;
			background-color: #fff;
		}
		.header_x ul{
			line-height: 45px;
		}
		.header_x li{
			float: left;
			margin: 5px 15px;
			line-height: 45px;
		}
		.header_x img{
			height: 30px;
			margin: 0 8px;
		}
		.header_x .li1{
			margin-top: -1px ;
		}




	/* 主体 */
		.main_1{
			/* background-color: #afb; */
			margin: 10px auto;
		}
		/* 主体代码简写 */
		.main_zb,.main_tj,.main_banner,.main_kc{
			width: 100%;
		}
		/* 主体 - 直播 */
		.main_zb{
			height: 335px;
			/* background-color: #abf; */
		}
		.main_1 h2{
			font-size: 20px;
			padding: 10px 0 0 10px;
		}
		.main_1 .zb_1{
			width: 220px;
			height: 110px;
			background-color: #fff;
			float: left;
			margin-top: 10px;
			margin-left: 5px ;
			margin-right: 5px;
			padding: 5px;
		}
		.zb_1 img{
			width: 80xp;
			height: 80px;
			float: left;
			margin: 5px;
		}
		.main_1 span{
			color: rgb(133, 133, 133);
			font-size: 14px;
		}





		/* 主体 - 推荐 */
		.main_tj{
			/* background-color: rgb(255, 255, 255); */
			margin: 10px 0;
			padding-bottom: 20px;
			overflow: hidden;

		}
		.clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
		.main_1 .box1{
			width: 176px;
			height: 250px;
			background-color: rgb(255, 255, 255);
			float: left;
			
		}
		.main_1 .box1:nth-child(1),.main_1 .box1:nth-child(2),.main_1 .box1:nth-child(3),.main_1 .box1:nth-child(4),.main_1 .box1:nth-child(5){
			margin-right: 20px;
		}
		.main_tj img{
			width: 100%;

		}

		/* 主体 - banner */
		.main_banner{
			height: 90px;
			/* background-color: #abf;	 */
		}
		.main_banner img {
			float: left;
			height: 100%;
			/* margin: 0 10px; */
		}
		/* 主体 - 课程 */

	/* 底部 */
	.foot1{
	width: 1000px;
	height: 300px;
	margin: 0 auto;
	margin-top: 10px;
	/*background: coral;*/
}
.foot1 p{
	text-align: center;
	font-size: 18px;
	padding-top: 30px;
}
.foot1-2
{
	width: 300px;
	height: 70px;
	margin-left: 365px;
	margin-top: 40px;
	/*background: cadetblue;*/
}
.foot1-2 img{
	width: 50px;
	height: 50px;
	border-radius: 100%;
}
.xd1{
	position: relative;
	top: -10px;
	left: 45px;
}
.xd2{
	position: relative;
	top: -65px;
	left: 77px;
	float: left;
}
.xd3{
	position: relative;
	top: -65px;
	left: 60px;
	float: left;
}
.xd4{
	position: relative;
	top: -63px;
	left: 44px;
	float: left;
}
.xd5{
	position: relative;
	top: -63px;
	left: 23px;
	float: left;
}
.foot1-1{
	width: 300px;
	height: 50px;
	margin: 0 auto;
	margin-top: 25px;
	background: #32CD32;
	border-radius: 30px;
}
.foot1-1 span{
	font-size: 24px;
	text-align: center;
	color: white;
	margin-left: 80px;
	line-height: 49px;
	position: relative;
	top: -14px;
	left: -2px;
}
.foot2{
	width: 1000px;
	height: 250px;
	margin: 0 auto;
	margin-top: 10px;
	background:  slategrey ;
}
.foot2-1{
	width: 550px;
	height: 100px;
	margin-left: 32px;
	
	margin-top: 26px;
	float: left;
}

.foot2-1 img{
	
	height: 40px;
	align-content: center;
	margin-left: 5px;
}
.foot2-1 p{
	font-size: 1px;
	color: white;
}
.foot2-2{
	width: 368px;
	height: 22px;
	float: left;
	margin-top: 26px;
	/*background: cornflowerblue;*/
}
.foot2-2 p{
	float: left;
	margin-left: 56px;
	
}
.foot2-3{
	width: 140px;
	height: 90px;
	float: left;
	margin-left: 22px;
	/*background: cyan;*/
}
.foot2-3 p{
	color: #A9A9A9;
	font-size: 15px;
	margin-top: 10px;
}
.foot2-4{
	width: 97px;
	height: 90px;
	float: left;
	margin-left: 10px;
	/*background: cyan;*/
}
.foot2-4 img{
	margin-top: 10px;
	margin-left: 10px;
}
.foot2-5{
	width: 105px;
	height: 90px;
	float: left;
	margin-left: 15px;
	/*background: cyan;*/
}
.foot2-5 p{
	margin-top: 10px;
	color:  #A9A9A9;
}
.foot2-6{
	width: 1000px;
	height: 90px;
	float: left;
	margin-top: 30px;
	/*background: cyan;*/
}
.foot2-6 p{
	font-size: 10px;
	color: #A9A9A9;
	margin-top: 5px;
	text-align: center;
}

	</style>
</head>
<body>
<!-- 头部 -->
	<header class="header_1">
		<!-- 头部导航 -->
			<div class="header_dh">
				<div class="header_dh_logo"><img src="./img/logo.png" alt=""></div>
				<div class="header_dh_wz">
					<ul>
						<li><a href="#">课程</a></li>
						<li><a href="#">学校</a></li>
						<li><a href="#">学校云</a></li>
						<li><a href="#">慕课堂</a></li>
						<li><a href="#">下载APP</a></li>
					</ul>
				</div>
				<div class="header_dh_dl">
					<ul>
						<li><input type="text"></li>
						<li><a href="#">登录</a></li>
						<li><a href="#">注册</a></li>
					</ul>
				</div>
			</div>
		<!-- 头部中间 -->
			<div class="header_zj">
				<div class="header_zj_left">
					<ul>
						<li><a href="#"><span>国家精品&nbsp;</span></a></li>
						<li><a href="#"><span>计算机&nbsp;</span>大数据与人工智能 / ...</a></li>
						<li><a href="#"><span>外语&nbsp;</span>听力 / 口语 / 写作 / 翻...</a></li>
						<li><a href="#"><span>理学&nbsp;</span>数学 / 物理 / 化学 / 天...</a></li>
						<li><a href="#"><span>工学&nbsp;</span>力学 / 材料</a></li>
						<li><a href="#"><span>2023考研&nbsp;</span>23数学 / 23计算...</a></li>
						<li><a href="#"><span>期末不挂科&nbsp;</span>数学不挂科 / 物...</a></li>
						<li><a href="#"><span>大学应试英语&nbsp;</span>四六级 / 考研...</a></li>
						<li><a href="#"><span>考证就业&nbsp;</span>计算机二级 / 办公...</a></li>
						<li><a href="#"><span>更多&nbsp;</span>∨</a></li>
					</ul>
				</div>
				<div class="header_zj_banner"><img src="./img/lb1.png" id="bn" alt=""></div>
				<div class="header_zj_right">
					<div class="div1"><p>免费学习来自名校名师的</p><p>精品课程</p></div>
					<div class="div2"></div>
					<div class="div3"><p>登录/注册</p></div>
					<div class="div4"><p>网易的高等教育出版社出品</p></div>
				</div>
			</div>
		<!-- 头部下 -->
			<div class="header_x">
				<ul>
					<li class="li1"><p>全部781所合作高校></p></li>
					<li><img src="./img/bd.png" alt=""></li>
					<li><img src="./img/zd.png" alt=""></li>
					<li><img src="./img/njd.png" alt=""></li>
					<li><img src="./img/wd.png" alt=""></li>
					<li><img src="./img/hgd.png" alt=""></li>
				</ul>
			</div>

	</header>

<!-- 主体 -->
	<main class="main_1 clearfix">
		<div class="main_zb">
			<h2>最近直播</h2>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>
			<div class="zb_1">
				<span>● 今日19:00开始</span>
				<br>
				<img src="./img/t.jpg" alt="">
				<li>四六级阅读专项技巧（12月10日）</li>
				<span>陈正康博士</span>
			</div>

		</div>
		<div class="main_tj clearfix">
			<h2>编辑推荐</h2>
			<div class="box1">
				<img src="./img/class1.webp.jpg" alt="">
				<h4>解读中国经济发展密码</h4>
				<p>同济大学</p>
				<br><br>
				<p>1510人参加</p>
				<p>共同把握发展大势</p>
			</div>
			<div class="box1">
				<img src="./img/class1.webp.jpg" alt="">
				<h4>解读中国经济发展密码</h4>
				<p>同济大学</p>
				<br><br>
				<p>1510人参加</p>
				<p>共同把握发展大势</p>
			</div>
			<div class="box1">
				<img src="./img/class1.webp.jpg" alt="">
				<h4>解读中国经济发展密码</h4>
				<p>同济大学</p>
				<br><br>
				<p>1510人参加</p>
				<p>共同把握发展大势</p>
			</div>
			<div class="box1">
				<img src="./img/class1.webp.jpg" alt="">
				<h4>解读中国经济发展密码</h4>
				<p>同济大学</p>
				<br><br>
				<p>1510人参加</p>
				<p>共同把握发展大势</p>
			</div>
			<div class="box1">
				<img src="./img/class1.webp.jpg" alt="">
				<h4>解读中国经济发展密码</h4>
				<p>同济大学</p>
				<br><br>
				<p>1510人参加</p>
				<p>共同把握发展大势</p>
			</div>

		</div>
		<div class="main_banner">
			<img src="./img/bn1.png" alt="">
			<img src="./img/bn2.png" alt="">
			<img src="./img/bn3.png" alt="">
		</div>
		<div class="main_kc"></div>
	</main>

<!-- 底部 -->
<div class="foot1">
	<p>让每一个有意愿提升自己的人，都可以获得更优质的教育</p>
	<div class="foot1-2">
		<div class="xd1">
			<img src="./img/t.jpg"/>
		</div>
		<div class="xd2">
			<img src="./img/t1.png"/>
		</div>
		<div class="xd3">
			<img src="./img/t2.png"/>
		</div>
		<div class="xd4">
			<img src="./img/t3.png"/>
		</div>
		<div class="xd5">
			<img src="./img/t.jpg"/>
		</div>
		
	</div>
	
	<div class=" foot1-1">
		<nav>
			<a href=""><span>
				开启学习之旅
			</span></a>
		</nav>	
	</div>
		
</div>
<div class="foot2">
	<div class="foot2-1">
		<img src="./img/logo.png"/>
		<p>由高校社联手网易推出，让每一个有提升愿望的用户能够多学到中国知名高校的课程，并获得认证.</p>				
	</div>
	<div class="foot2-2">
		<p>关于我们</p>
		<p>关注我们</p>
		<p>友情链接</p>
	</div>
	<div class="foot2-3">
		<p>关于我们&nbsp;&nbsp;&nbsp;学校云</p>
		<p>联系我们&nbsp;&nbsp;&nbsp;常见问题</p>
		<p>意见反馈&nbsp;&nbsp;&nbsp;意见条款</p>
	</div>
	<div class="foot2-4">
		<img src="./img/icon-1.png"/>
		<img src="./img/icon-3.png"/>
		
	</div>
	<div class="foot2-5">
		<p>网易云课堂</p>
		
	</div>
	<div class="foot2-6">
		<p>网上有害举报人(涉及未成年):网站http://www.12377.cn电话 010-58581010 邮箱(涉及未成年人)youdao_jubao@rd.netease.com</p>
		<p>粤B2-20090191-26|京ICP备12020869号-2|京公安网设备44010602000207</p>
		<p>©2014-2021&nbsp;&nbsp;icourse163.org</p>
	</div>
</div>
</body>
</html>